---
import { Footer, Header, ThemeProvider } from 'astro-pure/components/basic'
import type { SiteMeta } from 'astro-pure/types'
import BaseHead from '@/components/BaseHead.astro'
import config from '@/site-config'

// Import the global.css file here so that it is included on
// all pages through the use of the <BaseLayout /> component.
import '@/assets/styles/app.css'

interface Props {
  meta: SiteMeta
  highlightColor?: string
}

const {
  meta: { articleDate, description = config.description, ogImage, title },
  highlightColor,
  ...props
} = Astro.props
---

<html lang={config.locale.lang}>
  <head>
    <BaseHead {articleDate} {description} {ogImage} {title} />
    <ThemeProvider />
  </head>

  <body class='flex justify-center bg-background text-foreground' {...props}>
    {
      highlightColor && (
        <div
          id='highlight-gradient'
          class='pointer-events-none absolute start-0 top-0 z-0 h-screen w-full opacity-25'
          style={`background-image:linear-gradient(${highlightColor},transparent)`}
        />
      )
    }
    <div class='w-full max-w-[70rem] px-4 sm:px-7 lg:px-10 min-h-[100dvh] flex flex-col justify-between'>
      <Header />
      <div class='flex-1 w-full'>
        <slot />
      </div>
      <Footer />
    </div>

    {/* Set highlight color */}
    <style define:vars={{ highlightColor }}>
      :global(.highlight) {
        color: var(--highlightColor, hsl(var(--primary) / var(--un-text-opacity))) !important;
      }
      :global(.highlight-bg) {
        background-color: var(
          --highlightColor,
          hsl(var(--primary) / var(--un-text-opacity))
        ) !important;
      }
    </style>
  </body>
</html>
